import { WidgetLayout } from '@indexea/sdk/layout';
import { SearchContext } from '@indexea/sdk/context';
import { useIndexeaSearch } from '../hooks';

import Input from './input';
import Hotwords from './hotwords';
import Render from './render';

// export type HomeProps = {
//   context: SearchContext
//   search: (q: string) => void
// }

/**
 * 搜索脚手架的首页
 * 包含 Logo、输入框以及热门搜索词
 * @param context
 * @returns
 */
export default function () {
  const { defaultLogo: logo, inQuery } = useIndexeaSearch();

  if (inQuery) {
    return <Render />
  }

  return (
    <div
      className="d-flex justify-content-center align-middle"
      style={{ height: '60vh' }}
    >
      <div className="m-auto" style={{ width: '600px' }}>
        <div className="mb-4">
          <img src={logo} className="mx-auto d-block" alt="..." width="200"/>
        </div>
        <Input showLogo={false}/>
        <Hotwords/>
      </div>
    </div>
  );
}
